<template>
  <div class="inline">

    <span @click="openDrawer">
      <a v-if="type === 'link'">{{ action.text }}</a>
      <a-button v-else :type="action.config.color">
        <import-outlined v-if="action.icon === 'import'"/>
        <plus-outlined v-else-if="action.icon === 'plus'"/>
        {{ action.text }}
      </a-button>
    </span>

    <a-drawer
      v-model:visible="drawerVisible"
      :closable="false"
      :destroy-on-close="true"
      :title="action.config.title"
      placement="right"
      width="600px"
      @close="closeDrawer">

      <a-skeleton v-if="initLoading" :paragraph="{ rows: 4 }" :title="false" active/>
      <component :is="action.config.component"
                 v-else-if="ready"
                 :data="initData"
                 :selected-rows="selectedRows"/>
    </a-drawer>
  </div>
</template>

<script setup>
import {ImportOutlined, PlusOutlined} from "@ant-design/icons-vue";

const {action, type, selectedRows, extraParams} = defineProps(['action', 'type', 'selectedRows', 'extraParams']);
const emit = defineEmits(['change']);

const {data: initData, isLoading: initLoading, execute: loadInitData} = useApi({
  url: action.config.dataUrl,
  immediate: false
});

/* 初始数据 */
const ready = ref(false);
const init = async () => {
  if (action.config.dataUrl == null) {
    ready.value = true;
  } else {
    // 加载初始数据
    await loadInitData({
      data: {
        id: selectedRows?.[0]?.id
      }
    });
    ready.value = true;
  }
}

/* 抽屉打开与关闭处理 */
const drawerVisible = ref(false);
const closeDrawer = () => {
  drawerVisible.value = false;
}
const openDrawer = async () => {
  drawerVisible.value = true;
  await init();
}
</script>
